<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>vue1</title>
        <script src="../js/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <father></father>
        </div>
        <template id="father">
            <div>
                <son1 @parentchange="change"></son1>
                <son2 :parentnum="num"></son2>
            </div>
        </template>
        <template id="son1">
            <div>
                <button @click="add">+</button>
                <button @click="sub">-</button>
                <input type="text" v-bind:value="count">
            </div>
        </template>
        <template id="son2">
            <div>
                <!-- 如果想要在子组件中使用父组件的数据，那么必须通过父组件传递
                如果需要在子组件中使用祖先组件中的数据，那么就必须一层一层的传递

             -->
               <p> {{parentnum}}</p>
            </div>
        </template>
        <script>

            Vue.component("father", {
                template: "#father",
                data() {
                    return {
                        num:0
                    }
                },
                methods:{
                    change(newCount){
                        this.num = newCount;
                    }
                }, 
                components:{
                    "son1":{
                        template:"#son1",
                        data() {
                            return {
                                count:0
                            }
                        },
                        methods: {
                            add(){
                                this.count = this.count += 1
                                this.$emit("parentchange", this.count);
                                console.log("aaaaa",this.count)
                            },
                            sub(){
                                this.count > 0 ?  this.count = this.count -= 1  : this.count = 0
                                this.$emit("parentchange", this.count)
                            }
                        },
                    },
                    "son2":{
                        template:"#son2",
                        props:["parentnum"]
                    }
                }
            })

            let vue = new Vue({
        // 告诉vue的实例对象，将来需要控制界面上的那个区域
                el:'#app',
                data:{
                    name:"内容1"
                }
            });
        </script>
    </body>
</html>